import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { View, Button, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import utils from '@/utils/index';
import avatar from '@/images/me/tmpAvart.png';
import pBgHeader from '@/images/common/bgHeader.png';
import pBack from '@/images/common/leftWhite.svg';
import './index.scss';

const bar = {
  title: '账户余额',
  back: true,
};
const background = {
  src: pBgHeader,
  contentWidth: 120,
};
const goBack = () => {
  Taro.navigateBack({ url: '/pages/mainPages/me/index' });
};

const Index = ({ dispatch, userDetail = {} }) => {
  const [userInfo, setUserInfo] = useState({});

  useEffect(() => {
    let user = utils.getLocalUser();
    setUserInfo(user);
    getUserDetail();
  }, []);

  const getUserDetail = () => {
    dispatch({
      type: 'otherApi/getUserDetailModel',
      payload: {},
    });
  };

  const recharge = () => {};
  const balance = () => {};
  return (
    <View className="totalPage_accountBalance">
      {!Taro.$isH5 && background ? (
        background.src ? (
          <View
            className="topBackground"
            style={{
              height: background.contentWidth + Taro.$statusBarHeight + Taro.$titleHeight + 'px',
            }}
          >
            <Image className="topBackgroundImg" src={background.src}></Image>
          </View>
        ) : (
          <View
            className="topBackground"
            style={{
              background: background.backgroundColor,
              height: background.contentWidth + Taro.$statusBarHeight + Taro.$titleHeight + 'px',
            }}
          ></View>
        )
      ) : (
        <View className="topBackground"></View>
      )}
      <View className="fontPage">
        {!Taro.$isH5 && (
          <View
            className="topBar"
            style={{
              height: Taro.$titleHeight + 'px',
              top: Taro.$statusBarHeight + 'px',
            }}
          >
            {bar && (
              <>
                {bar.back ? (
                  <Image className="backIcon" src={pBack} onclick={goBack} />
                ) : (
                  <View className="backIcon"></View>
                )}
                <Text className="title">{bar.title}</Text>
                <View className="backIcon"></View>
              </>
            )}
          </View>
        )}

        <View
          className="warp"
          style={{
            marginTop: Taro.$titleHeight + Taro.$statusBarHeight + 'px',
            height: 'calc(100% - ' + Taro.$titleHeight + 'px - ' + Taro.$statusBarHeight + 'px)',
          }}
        >
          <View className="card">
            <View className="baseInfo">
              <Image src={avatar} className="avatar" />
              <View className="textBox">
                <Text className="textTop">{userInfo.nickName || ''}</Text>
                <Text className="textBotto">{userInfo.userNo || ''}</Text>
              </View>
            </View>
            <View className="textMoney">
              <Text className="unit">¥</Text>
              <Text className="text">{userDetail.balance || 0}</Text>
            </View>
            <View className="textBalance">
              <Text className="text">我的余额</Text>
            </View>
          </View>
          <View className="btnBoxWrap">
            <View className="btnBox">
              <Button className="btn" onClick={recharge}>
                我的充值二维码
              </Button>
            </View>
            <View className="btnBoxBotto">
              <Button className="btn" onClick={balance}>
                查看余额明细
              </Button>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
};
export default connect(({ otherApi }) => ({
  userDetail: otherApi.userDetail,
}))(Index);
